<template>
  <div ref="target">
    <home-panel title="人气推荐" sub-title="人气推荐 不容错过">
      <!-- 面板内容 -->
      <div class="home-hot">
        <!-- 动画组件-显示 -->
        <transition name="fade">
          <ul class="goods-list" v-if="list.length > 1">
            <li v-for="item in list" :key="item.id">
              <router-link to="/">
                <img :src="item.picture" />
                <p class="name ellipsis">{{ item.title }}</p>
                <p class="desc">{{ item.alt }}</p>
              </router-link>
            </li>
          </ul>
          <!-- 骨架 -->
          <HomeSkeleton bg="#f0f9f4" v-else></HomeSkeleton>
        </transition>
      </div>
    </home-panel>
  </div>
</template>

<script>
import HomePanel from './homePanel.vue'
import { computed } from 'vue'
import { getHomeHotListAPI } from '@/api'
import HomeSkeleton from '@/components/HomeSkeleton.vue'
import { useLazyData } from '@/utils/hooks'
export default {
  name: 'HomeHot',
  components: { HomePanel, HomeSkeleton },
  setup () {
    // const target = ref(null)
    // // 懒加载
    // const { stop } = useIntersectionObserver(target, async ([{ isIntersecting }]) => {
    //   if (isIntersecting) {
    //     const res = await getHomeHotListAPI()
    //     list.value = res.result
    //     stop()
    //   }
    // })
    // useLazyData()
    // console.log(useLazyData(getHomeHotListAPI, { limit: 4 }))
    const { target, res } = useLazyData(getHomeHotListAPI, { limit: 4 })

    const list = computed(() => {
      if (res.value) {
        return res.value.result
      } else {
        return []
      }
    })

    return {
      list,
      target
    }
  }
}
</script>
  <style scoped lang="less">
.home-hot {
  position: relative;
  height: 426px;
}
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 406px;
  li {
    width: 306px;
    height: 406px;
    transition: all 0.5s;
    &:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }
    img {
      width: 306px;
      height: 306px;
    }
    p {
      font-size: 22px;
      padding: 12px 30px 0 30px;
      text-align: center;
    }
    .desc {
      color: #999;
      font-size: 18px;
    }
  }
}
</style>
